@use "sass:math"

// 面包屑导航
.bread-wrapper
    margin-top: -$column-gap * 2

    div
        height: 56px
        color: $base-grey

        li
            & > a
                +link-grey-red

    li.lead-text + li a
        padding-left: 0
    li.lead-text + li::before
        content: none

// 标题样式
$title-style-height: 50px
$title-style-font-size: 20px
$title-style-padding: math.div($title-style-height - $title-style-font-size, 2)
$title-style-padding-bottom: $title-style-padding - 2px
$title-style-border-color: $base-red

.title-wrapper
    border-bottom: 3px solid #eee
    position: relative
    height: $title-style-height
    margin-top: 4px
    margin-bottom: 12px

    &+.columns
        margin-top: 0

.title.title-style
    position: absolute
    top: -2px
    left: 0
    font-size: $title-style-font-size
    padding: $title-style-padding 0 $title-style-padding-bottom
    line-height: 1
    border-bottom: 2px solid $title-style-border-color
    font-weight: normal

    &.title-red
        color: $base-red
        font-weight: bold
        font-size: 24px
        a
            +link-red

    &.title-bold
        font-weight: bold

// 首页左侧列表项
$column-gap-lr: .55rem
.post-list-item
    padding-top: 0
    padding-bottom: .25rem
    padding-left: $column-gap-lr
    padding-right: $column-gap-lr

    a.post-cate
        white-space: nowrap

    a.post-title
        margin-left: .35rem
        +nowrap

// 右侧热门文章列表
.mod-list.hot li
    margin-bottom: .17em
    span
        background-color: $base-grey
        color: #ffffff
        box-sizing: border-box
        height: 20px
        line-height: 20px
        margin-right: .7em
        text-align: center
        width: 10%
    a
        width: 90%
        +nowrap
    // &:not(:last-child)
    //     margin-bottom: .4em
    &:nth-child(1) span
        background-color: #ff3300
    &:nth-child(2) span
        background-color: #ff6600
    &:nth-child(3) span
        background-color: #ff9900
